<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
       
    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let list=[
            {
                name:"张三",
                age:18,
                sex:true
            },
            {
                name:"李四",
                age:8,
                sex:false
            },{
                name:"王红",
                age:15,
                sex:false
            },{
                name:"张良",
                age:19,
                sex:true
            }
        ]
        let style1 = {
            color:"red"
        }
        let style2 = {
            color:"blue"
        }
        let table = (
            <table border='1'>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄段</th>    
                </tr>
            </thead>
            <tbody>
                {
                    list.map((item,index)=>{
                        return (
                            <tr key={index} style={index % 2 ===0?style1:style2}>
                                <td>{item.name}</td>
                                <td>{item.sex?"男生":"女生"}</td>
                                <td>
                                    {item.age<10 && "少年"}
                                    {(item.age>=10 && item.age<18) && "青年"}
                                    {item.age>=18 && "成年"}
                                </td> 
                                <td>
                                    <button onClick={()=>clickMe(item)}>点我</button>
                                </td>   
                            </tr>
                        )
                    })
                }
            </tbody>    
            </table>
        )

        function clickMe(item){
            alert(`我叫${item.name},今年${item.age},是个${item.sex?'男':'女'}`)
        }
        ReactDOM.render(table,document.getElementById("root"))
       
</script>
</html>